<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"  
      xmlns:h="http://java.sun.com/jsf/html"  
      xmlns:f="http://java.sun.com/jsf/core"  
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:t="http://myfaces.apache.org/tomahawk"
      xmlns:p="http://primefaces.org/ui">  
    <ui:composition template="/templates/layout.xhtml">
        <ui:define name="content">            

            <t:div styleClass="block">
                <t:div styleClass="navbar navbar-inner block-header">
                    <t:div styleClass="muted pull-left">Danh Sách Khóa Học</t:div>
                </t:div>
                <t:div styleClass="block-content collapse in">
                    <t:div styleClass="span12">
                        <t:dataTable id="tblCourse" value="#{courseManageBean.pageData}" var="cursor" styleClass="table table-hover" 
                                     preserveSort="true" rows="10" sortColumn="#{courseManageBean.sort}" sortAscending="#{courseManageBean.sortAscending}"
                                     >
                            <t:column>
                                <f:facet name="header">
                                </f:facet>
                                <t:selectOneRow groupName="selectRadioGroup" />
                            </t:column>
                            <t:column>
                                <f:facet name="header">
                                    <t:commandSortHeader columnName="ui.id" arrow="true" styleClass="sortColumn">
                                        <h:outputText value="ID"/>
                                    </t:commandSortHeader>
                                </f:facet>
                                <h:outputText value="#{cursor.ui.id}">
                                </h:outputText>
                            </t:column>
                            <t:column>
                                <f:facet name="header">
                                    <t:commandSortHeader columnName="ui.courseName" arrow="true" styleClass="sortColumn">
                                        <h:outputText value="Tên Khóa Học"/>
                                    </t:commandSortHeader>
                                </f:facet>
                                <h:outputText value="#{cursor.ui.courseName}"/> 
                            </t:column>
                            <t:column>
                                <f:facet name="header">
                                    <t:commandSortHeader columnName="ui.courseLevelName" arrow="true" styleClass="sortColumn">
                                        <h:outputText value="Trình Độ"/>
                                    </t:commandSortHeader>
                                </f:facet>
                                <h:outputText value="#{cursor.ui.courseLevelName}">
                                </h:outputText>
                            </t:column>
                            <t:column>
                                <f:facet name="header">
                                    <t:commandSortHeader columnName="ui.courseTypeName" arrow="true" styleClass="sortColumn">
                                        <h:outputText value="Loại Khóa Học"/>
                                    </t:commandSortHeader>
                                </f:facet>
                                <h:outputText value="#{cursor.ui.courseTypeName}">
                                </h:outputText>
                            </t:column>
                            <t:column>
                                <f:facet name="header">
                                    <t:commandSortHeader columnName="" arrow="true" styleClass="sortColumn">
                                        <h:outputText value="Thời gian"/>
                                    </t:commandSortHeader>
                                </f:facet>
                                <h:outputText value="1">
                                </h:outputText>
                            </t:column>

                            <t:column>
                                <f:facet name="header">
                                    <t:commandSortHeader columnName="ui.status" arrow="true" styleClass="sortColumn">
                                        <h:outputText value="Trạng Thái"/>
                                    </t:commandSortHeader>
                                </f:facet>
                                <h:outputText value="#{cursor.ui.status}">
                                </h:outputText>
                            </t:column>

                            <f:facet name="footer">
                                <div class="row">
                                    <div class="span6" style="padding-left: 30px">
                                        <t:div styleClass="pagination pagination-left">
                                            <ul>
                                                <li>
                                                    <t:commandLink  value="Chọn" />
                                                </li>
                                            </ul>
                                        </t:div>
                                    </div>
                                    <div class="span6">
                                        <t:div styleClass="pagination pagination-right">
                                            <ul>
                                                <li>
                                                    <t:commandLink  value="Previous"
                                                                    disabled="#{!courseManageBean.hasPreviousPage}"
                                                                    action="#{courseManageBean.previousPage}"/>
                                                </li>

                                                <li>
                                                    <t:commandLink  value="Next"
                                                                    disabled="#{!courseManageBean.hasNextPage}"
                                                                    action="#{courseManageBean.nextPage}" />
                                                </li>
                                                <li class="active"> <a href="#"><t:outputText value="#{courseManageBean.rowCount} row(s)"/></a>
                                                </li>
                                            </ul>
                                        </t:div>
                                    </div>
                                </div>
                            </f:facet>
                          
                        </t:dataTable>

                    </t:div>
                </t:div>

            </t:div>

            <t:inputHidden id="txtSelectedID" value="#{courseManageBean.selectedID}"/>
            <script type="text/javascript" language="JavaScript">
                $("#ppsForm\\:tblCourse input:radio").each(function() {
                    var radioSelect = $(this);
                    radioSelect.click(function() {
                        $("#ppsForm\\:txtSelectedID").val($(this).parent().parent().find("td").eq(1).html());
                    });
                });

               // $("#collapseOne").collapse({hide: true});


                $('#ppsForm\\:txtDateOpen').datepicker({
                    format: 'dd/mm/yyyy'
                });



            </script>
        </ui:define>
    </ui:composition>        

</html>  